<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要评论的内容（最多吐槽120字）" max-length="120" v-model="newCmt"></textarea>
        <mt-button type="primary" size="large" @click="sendNewCmt">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item, i) in commentList" :key="item.id">
                <div class="cmt-title">
                    第{{ i+1 }}楼&nbsp;&nbsp;用户：{{ item.name}}&nbsp;&nbsp;发表时间：{{ item.date}}
                </div>
                 <!-- <div class="cmt-body" v-html="item.content === 'undefined'?'此用户很懒，什么也没留下。。。。':item.content">
                </div> -->
                <div class="cmt-body">
                     {{ item.content === 'undefined'?'此用户很懒，什么也没留下。。。。':item.content }} 
                </div>
            </div>
            
        </div>
        <mt-button type="danger" size="large" plain @click="getMoreComment">加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
    data(){
        return {
            commentList: [],
            newCmt: '',
            maxid: 10
        }
    },
    methods: {
        sendNewCmt(){
            if(this.newCmt.trim().length==0){
                Toast('评论内容不能为空')
                return
            }
            this.maxid = this.maxid+1
            var obj = { name:'匿名用户', date: Date.now(), content: this.newCmt.trim() }
            this.commentList.unshift(obj)
            this.newCmt = ''
        },
        getMoreComment(){ // 加载更多
             var list = [
                { id:'4', name: '赵六', date: '2019-09-10', count: '32', img: '../../images/14.jpg', content: ' <p>在一起时，很幸福。<p>相遇时，很幸福。<p>相爱时，很幸福。</p>'},
                { id:'5', name: '张飞', date: '2019-09-10', count: '13', img: '../../images/15.jpg', content: 'undefined'},
                { id:'6', name: '李欣', date: '2019-09-10', count: '33', img: '../../images/17.gif', content: '<p>飞吧</p>'},
                { id:'7', name: '刘欣', date: '2019-09-10', count: '43', img: '../../images/19.gif', content: '<p>是你手机的</p><img src="../../images/20.jpg">'},
                { id:'8', name: '林夕', date: '2019-09-10', count: '321', img: '../../images/5.jpg', content: 'undefined'},
            ]
            this.commentList = this.commentList.concat(list)
        },
        getComment(){ // 初始化列表
            var id = this.id
            var list = [
                { id:'1', name: '张三', date: '2019-09-08', count: '41', img: '../../images/11.jpg', content: ' <p>幸福往往离我们遥远，当拥有了，不会一辈子，只是短暂的一瞬间。</p>' },
                { id:'2', name: '李四', date: '2019-09-09', count: '2', img: '../../images/12.jpg', content: '<p>更合适的规范化</p><img src="../../images/18.jpg"><p>还记得发货计划的伤口恢复数据</p>'},
                { id:'3', name: '王五', date: '2019-09-10', count: '3', img: '../../images/13.jpg', content: ' <p>幸福时好像全世界都在舞动，当幸福离去好像全世界都沉沦在悲伤里。'},
               ]
            this.commentList = list
        }
    },
    created(){
        this.getComment()
    },
    props: ['id']
}
</script>

<style lang="scss">
.cmt-container{
    h3{
        font-size: 18px;
    }
    textarea{
        font-size: 14px;
        height: 85px;
        margin: 0;
    }
    .cmt-list{
        margin: 5px 0;
        .cmt-item{
            font-size: 13px;
            .cmt-title{
                background-color: #ccc;
                line-height: 35px;
            }
            .cmt-body{
                line-height: 35px;
                text-indent: 2em;
                img{
                    width:100%;
                }
            }
        }
    }
    
    
}

</style>